نحوه استفاده از Async-Await در جاوا اسکریپت

دسته:جاوااسکریپت تاریخ انتشار: 4 فوریه 2021 ایمان رضایی

جاوا اسکریپت کمی شبیه مردان بی چهره دنیای برنامه نویسی است.

می تواند ناهمزمان(Asynchronous) باشد. این می تواند تابعی (Functional) باشد. این می تواند شی گرا (Object-oriented) باشد. این می تواند سمت مشتری (Client-side) باشد. این می تواند سمت سرور (Server-side) باشد. این لیست ادامه دارد.

این مقاله بر روی جاوا اسکریپت ناهمزمان تمرکز خواهد کرد.

اما صبر کنید ، جاوا اسکریپت یک زبان همزمان(synchronous ) است!

این بدان معنی است که می توان همزمان فقط یک عملیات انجام داد. اما این کل تصویر اینجا نیست. جاوا اسکریپت به ما امکان می دهد تا مانند یک زبان ناهمزمان رفتار کند. یکی از آنها با بند Async-Await است.

Async-Await چیست؟

Async و Await تمدید Promise هستند. اگر با مفاهیم promise آشنا نیستید ، می توانید به مقاله نحوه نوشتن Promise در JavaScript مراجعه کنید.

Async

توابع Async ما را قادر می سازد تا کدهای مبتنی بر Promise را مانند اینکه همزمان باشد ، اما بدون مسدود کردن موضوع اجرا بنویسیم. از طریق حلقه رویداد بصورت همزمان انجام می شود. توابع Async همیشه مقداری را برمی گردانند. استفاده از async به سادگی نشان می دهد که یک promise مسترد می شود و اگر Promise مسترد نشود ، جاوا اسکریپت به طور خودکار آن را در یک Promise حل شده با ارزش خود قرار می دهد.

async function firstAsync() {

return 27;

}

firstAsync().then(alert); // 27

اجرای کد بالا خروجی هشدار 27 را نشان می دهد ، به این معنی است که Promise برگشت داده شده است ، در غیر این صورت روش .then() به سادگی امکان پذیر نیست.

Await

عملگر await برای انتظار یک promise استفاده می شود. فقط در داخل بلوک Async قابل استفاده است. کلمه کلیدی Await باعث می شود جاوا اسکریپت منتظر بماند تا زمانی که Promise نتیجه بدهد. لازم به ذکر است که فقط بلوک عملکرد async را منتظر می گذارد و نه کل اجرای برنامه را.

بلوک کد زیر استفاده از Async Await را با هم نشان می دهد.

async function firstAsync() {

let promise = new Promise((res, rej) => {

setTimeout(() => res("Now it's done!"), 1000)

});

// wait until the promise returns us a value

let result = await promise;

// "Now it's done!"

alert(result);

}

};firstAsync();

مواردی که باید هنگام استفاده از Async Await به خاطر بسپارید

ما نمی توانیم از کلمه کلیدی `await` در توابع منظم استفاده کنیم.

function firstAsync() {

let promise = Promise.resolve(10);

let result = await promise; // Syntax error

}

برای اینکه عملکرد فوق به درستی کار کند ، باید async را قبل از تابع firstAsync(); اضافه کنیم.

Async Await اجرا را پی در پی می کند

لزوما چیز بدی نیست ، اما اجرای موازی بسیار سریعتر انجام می شود.

مثلا:

async function sequence() {

await promise1(50); // Wait 50ms…

await promise2(50); // …then wait another 50ms.

return "done!";

}

تکمیل موارد فوق 100 میلی ثانیه طول می کشد ، زمان زیادی نیست اما هنوز هم کند است.

این به این دلیل است که به ترتیب اتفاق می افتد. دو promise بازگردانده می شود که انجام هر دو 50 میلی ثانیه طول می کشد. Promise دوم فقط پس از حل Promise اول اجرا می شود. این روش خوبی نیست ، زیرا درخواست های بزرگ می تواند بسیار وقت گیر باشد. ما باید اعدام را موازی کنیم.

با استفاده از Promise.all() می توان به این مهم دست یافت.

به گفته MDN:

متد Promise.all() یک Promise واحد را برمی گرداند که وقتی همه promise های تصویب شده مانند یک مسئله قابل حل حل شده و یا اینکه هیچ Promise ای قابل قبول نیست ، حل می شود. با دلیل اولین Promise رد می کند.

Promise.all()

async function sequence() {

await Promise.all([promise1(), promise2()]);

return "done!";

}

وقتی کلیه Promise های موجود قابل جمع شدن حل شده باشد ، تابع promise.all() حل می شود و سپس نتیجه را برمی گرداند.

روش دیگر:

async function parallel() { // Start a 500ms timer asynchronously…

const wait1 = promise1(50); // …meaning this timer happens in parallel.

const wait2 = promise2(50);

// Wait 50ms for the first timer…

await wait1;

// …by which time this timer has already finished.

await wait2;

return "done!";}

Async Await بسیار قدرتمند است اما با هشدارهای جدی همراه است. اما اگر از آنها به درستی استفاده کنیم ، آنها به خواندن و کارایی کد ما کمک می کنند.

n276

جاوااسکریپت

برنامه نویسی

توسعه وب

برای ثبت نظر باید وارد سایت شوید یا ثبت نام نمایید.